<template>
    <div class="comFlex comColumn comWidth100 bg comFlexCenter" style="padding-top: 60px;">
        <div class="typeBgClass comFlex comFlexCenter comTop38" v-for="(items,i) in menuList" :key="i">
            <span class="fontClass font44 comLeft50 comWidth216">{{ items.title }}</span>
            <div v-for="(item,i) in items.list" @click="toPage(item)" :key="i" :class="'bg' + (i+1)" class="container comFlex comFlexCenter comFlexSpaceAround comLeft50 comPointer">
                <span class="comFont32 fontClass comFontWhite">{{item.name}}</span>
                <div :class="item.icon"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { UserService } from '@/api/api'
import { onMounted , ref} from 'vue'
const menuList = ref([])
import { useRoute, useRouter } from 'vue-router';
import dashboardStore from '@/store/store.js'
const dashStore = dashboardStore()
const router = useRouter()
const route = useRoute()
const toPage = (item) => {
    if(item.loc){
        window.open(item.loc)
    }else{
          item.path = item.menuArr[0].path
    dashStore.increment(item.menuArr)
    router.push(item.path)
    }
}
const getMenu = () => {
    let prarams = {
        type : 0,
        parentId : -1
    }
    UserService.getUserMenu(prarams).then(res => {
        const { code, data } = res
        if(code == 0 && data){
            let tmp1 = []
            let tmp2 = []
            let tmp3 = []
            data.forEach((item,i) => {
                console.log('item.menuType,', item.menuType);
                
                if(item.menuType == 3){
                    tmp1.push({
                        name :item.name,
                        path : item.path,
                        menuArr : item.children,
                        bgClass : 'bg' + (i+1)
                    })
                }else if(item.menuType == 4){
                    tmp2.push({
                        name :item.name,
                        path : item.path,
                        menuArr : item.children,
                        bgClass : 'bg' + (i+1),
                        loc : '',
                        icon : ''
                    })
                }else{
                    tmp3.push({
                        name :item.name,
                        path : item.path,
                        menuArr : item.children,
                        bgClass : 'bg' + (i+1)
                    })
                }
            })
           let url = window.location.origin.split('8030')[0].toString()
           console.log('url,', tmp2);
           tmp2[0].loc = url + '3000/nursing/org'
           tmp2[1].loc = url + '3100/home/org'
           tmp2[2].loc = url + '3200/community/org'
           tmp2[3].loc = url + '3300/practice/org'
           tmp2.forEach((item,i) => {
            item.icon = 'icon' + (i + 1)
           })
            menuList.value.push({
                title : '基础平台',
                list : tmp1
            },
            {
                title : '业务平台',
                list : tmp2
            },
            {
                title : '物联网平台',
                list : tmp3
            })
        }
    })
}
onMounted(() => {
    getMenu()
})
</script>
<style scoped>
.container{
    width : 260px;
    height:100px;
    border-radius : 10px;
}
.bg{
    background-image: url('@/assets/work/workBg.png');
    background-size: 100% 100%;
    height: 86%;
    width: 100%;
}
.typeBgClass{
    width: 80%;
    height: 218px;
    background: rgba(255,255,255,0.5);
    border-radius: 32px;
    border: 2px solid #FFFFFF;
}
.bg1{
    background: url('@/assets/work/bg1.png') no-repeat;
    background-size: 100% 100%;
}

.bg2{
    background: url('@/assets/work/bg2.png') no-repeat;
    background-size: 100% 100%;
}

.bg3{
    background: url('@/assets/work/bg3.png') no-repeat;
    background-size: 100% 100%;
}

.bg4{
    background: url('@/assets/work/bg4.png') no-repeat;
    background-size: 100% 100%;
}
.icon1{
    background: url('@/assets/work/org.png') no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
}
.icon2{
    background: url('@/assets/work/liveHome.png') no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
}
.icon3{
    background: url('@/assets/work/community.png') no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
}
.icon4{
    background: url('@/assets/work/tranin.png') no-repeat;
    background-size: 100% 100%;
    width: 70px;
    height: 70px;
}
</style>